<template>
  <zc-card>
    <avue-crud ref="crud" :option="option" :page.sync="page" :table-loading="loading" @on-load="getList"
      @row-update="rowUpdate" :upload-after="uploadAfter" :upload-before="uploadBefore" :upload-error='uploadError' @row-save="rowSave"
      @row-del="rowDel" @refresh-change="refreshChange" @search-reset="searchChange2" @search-change="searchChange"
      v-model="form" :data="data" :permission="permission">
      <template slot="state" slot-scope="scope">
        <el-switch :disabled="!permission.editBtn" @change="
            (e) => {
              switchChange(e, scope.row.id);
            }
          " v-model="scope.row.state" :active-value="1" :inactive-value="2" :active-color="defaultTheme()"
          inactive-color="#DCDFE6"></el-switch>
      </template>


      <!-- <template slot-scope="scope" slot="menu">
        <el-button
          v-if="permission.editBtn"
          icon="el-icon-edit"
          :type="scope.type"
          :size="scope.size"
          @click.stop="handleEdit(scope.row, scope.index)"
          >编辑</el-button
        >
        <el-button
          v-if="permission.delBtn"
          icon="el-icon-delete"
          :type="scope.type"
          :size="scope.size"
          @click.stop="handleDel(scope.row, scope.index)"
          >删除</el-button
        >
      </template> -->
    </avue-crud>
  </zc-card>
</template>

<script>
  import { mapGetters } from "vuex";
  import {
    getList,
    update,
    add,
    del,
    updateStatus,
  } from "./{{name}}.js";
  import option from "./{{name}}-options.js";
  import {defaultTheme} from "@/settings";


  export default {
    name: "{{name}}",
    data() {
      return {
        permission: {
          addBtn: false,
          editBtn: false,
          delBtn: false,
          excelBtn: false,
        }, //权限
        page: {
          currentPage: 1,
          pageSize: 10,
        },
        form: {},
        params: {},
        loading: false,
        data: [],
        option: {},
      };
    },
    created() {
      const role = this.$defaultRoleStatus;
      this.permission.addBtn = this.zcbtn[this.$options.name + "_add"] || role;
      this.permission.editBtn = this.zcbtn[this.$options.name + "_edit"] || role;
      this.permission.delBtn = this.zcbtn[this.$options.name + "_del"] || role;
      this.permission.excelBtn =
        this.zcbtn[this.$options.name + "_excel"] || role;
      this.option = option(this);
    },
    mounted() {

    },
    computed: {
      ...mapGetters(["zcbtn"]),
    },
    methods: {
      defaultTheme() {
        return defaultTheme
      },
      // switch切换 启动禁用
      switchChange(e, id) {
        if (e == 1) {
          updateStatus({ field: "state", value: 1, id }).then((res) => {
            this.$notify({
              title: "成功",
              message: "修改状态成功",
              type: "success",
            });
          });
        }
        if (e == 2) {
          updateStatus({ field: "state", value: 2, id }).then((res) => {
            this.$notify({
              title: "成功",
              message: "修改状态成功",
              type: "success",
            });
          });
        }
      },
      // 上传前
      uploadError(error,column){
        console.error(error)
        console.error(column)
      },
      uploadBefore(file, done, loading) {
      done()
        // 文件处理

        // if (
        //   suffix == "pdf" ||
        //   suffix == "doc" ||
        //   suffix == "docx" ||
        //   suffix == "xlsx"
        // ) {
        //   this.form.info_files_name.push(fileName);
        //   this.form.info_files_suffix.push(suffix);
        //   done();
        //   return;
        // }

        // 什么都不是

        // if (suffix) {
        //   loading();
        //   this.$message.error("请上传正确的格式");
        // }
      },
      // 自定义删除
      handleDel(row, index) {
        this.$refs.crud.rowDel(row, index);
      },
      // 自定义编辑
      handleEdit(row, index) {
        this.$refs.crud.rowEdit(row, index);
      },
      uploadAfter(res, done) {
        done();
      },
      // 获取列表
      getList() {
        this.loading = true;
        const data = Object.assign(
          {
            page: this.page.currentPage,
            limit: this.page.pageSize,
          },
          this.params
        );
        this.data = [];
        return getList(data).then((res) => {
          this.loading = false;
          this.page.total = res.num;
          this.data = res.data;
          return Promise.resolve(true)
        });
      },
      // 新增
      rowSave(row, done, loading) {
        add(row)
          .then(() => {
            this.$message.success("新增成功");
            done();
            this.getList();
          })
          .catch(() => {
            loading();
          });
      },
      // 修改数据
      rowUpdate(row, index, done, loading) {
        update(row)
          .then(() => {
            this.$message.success("修改成功");
            done();
            this.getList();
          })
          .catch(() => {
            loading();
          });
      },
      // 删除
      rowDel(row) {
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            return del(row.id);
          })
          .then(() => {
            this.$message.success("删除成功");
            this.getList();
          });
      },
      async searchChange(params, done) {
        // console.log(params);
        if (params.add_time && params.add_time.length > 0) {
          params.start_time = params.add_time[0].getTime() / 1000;
          params.end_time = params.add_time[1].getTime() / 1000;
        }
        if (done) done();
        this.params = params;
        this.page.currentPage = 1;
        await this.getList();
        this.$message.success("搜索成功");
      },
      async searchChange2(params, done) {
        console.log(params);
        if (done) done();
        this.params = {};
        this.page.currentPage = 1;
        await this.getList();
        this.$message.success("搜索成功");
      },
      async refreshChange() {
        await this.getList();
        this.$message.success("刷新成功");
      },
    },
  };
</script>

<style lang="scss" scoped>
  .column-img-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }

  .user {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .user-msg {
    margin-left: 4px;
    text-align: left;
  }

  .namex {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 110px;
    text-align: left;
  }
</style>
